{% stylesheet %}
.graphic-block {
  display: flex;
  margin: 0 auto;
}

.graphic-block .graphic-image {
  flex: 1;
  flex-shrink: 0;
}

.graphic-block .graphic-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  vertical-align: top;
}

.graphic-block .graphic-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  padding: 30px;
  color: #333;
  overflow: hidden;
}

.graphic-block .graphic-content .graphic-content-title {
  max-width: 560px;
}

.graphic-block .graphic-content .graphic-content-des {
  width: 100%;
  margin-top: 20px;
  line-height: 1.5;
  color: var(--detail_color);
}

.graphic-block .graphic-content .graphic-content-des p {
  width: 100%;
  overflow: hidden;
}

.graphic-block .graphic-content-left {
  align-items: flex-start;
  text-align: left;
}

.graphic-block .graphic-content-center {
  align-items: center;
  text-align: center;
}

.graphic-block .graphic-content-right {
  align-items: flex-end;
  text-align: right;
}

.graphic-block.graphic-block-right {
  flex-direction: row-reverse;
}

.graphic-block.graphic-block-right .move_padding {
  padding-left: 0;
}

.graphic-block.image-fill {
  width: 100%;
  max-width: 100%;
}

@media screen and (max-width: 767px) {
  .graphic-block.graphic-block-right,
  .graphic-block {
    flex-direction: column;
    padding: 0 15px;
  }
  .graphic-block .graphic-content {
    padding: 15px;
  }
}

{% endstylesheet %}



<div class="graphic-block graphic-block-{{ section.settings.image_position }} {% if section.settings.is_wdith_fill %}full_container_wrapper{% else %}container_wrapper{% endif %}"> 
  <a href="javascript:;" class="graphic-image">
    {% if section.settings.image.src != "" %}
    <img data-src="{{ section.settings.image.src }}" src="{{ 'empty_loading.png' | public_asset_abs_url }}"   alt="{{ section.settings.image.alt }}">
    {% else %}
    {% include default_block , {width:'100%',height:"100%",min_height:"240px"} %}
    {% endif %}
  </a>

  <div class="graphic-content graphic-content-{{ section.settings.text_position }} {% if section.settings.bg_color == "" %}move_padding{% endif %}" style="background: {{ section.settings.bg_color }}">
    <div class="graphic-content-title general_title-color" style="color: {{ section.settings.title_color }}">{{ section.settings.title }}</div>
    <div class="graphic-content-des" style="color: {{ section.settings.content_color }}">{{ section.settings.content }}</div>
    {% if section.settings.button_title != "" %}
    <a href="{{section.settings.button_link | setUrlDataFrom:data_from}}" class="graphic-content-btn main_btn">{{ section.settings.button_title }}</a>
    {% endif %}
  </div>
</div>

{% schema %}
{
	"tag": "",
	"class": "block_image_text",
	"is_global": false,
	"name": {
		"zh_CN": "图文",
		"en_US": "Image and text"
	},
	"max_blocks": "0",
	"settings": [
		{
			"type": "card_header",
			"label": {
				"zh_CN": "图片",
				"en_US": "Image"
			}
		},
		{
			"type": "card_image",
			"label": {
				"zh_CN": "选择图片",
				"en_US": "Select image"
			},
			"default": {
				"src": "",
				"alt": ""
			},
			"info": {
				"zh_CN": "常用比例4:3、3:2、2:1、1:1，宽度1000px以上,高度可自适应",
				"en_US": "Commonly used ratio 4:3, 3:2, 2:1, 1:1, width 1000px or more, height can be adaptive"
			},
			"id": "image"
		},
		{
			"type": "card_select",
			"label": {
				"zh_CN": "pc图片位置",
				"en_US": "PC image location"
			},
			"id": "image_position",
			"option": [
				{
					"label": {
						"zh_CN": "左图右文",
						"en_US": "Left image right text"
					},
					"value": "left"
				},
				{
					"label": {
						"zh_CN": "右图左文",
						"en_US": "Right image left text"
					},
					"value": "right"
				}
			],
			"default": "right"
		},
		{
			"type": "card_select",
			"label": {
				"zh_CN": "文字对齐方式",
				"en_US": "Text alignment"
			},
			"id": "text_position",
			"option": [
				{
					"label": {
						"zh_CN": "左对齐",
						"en_US": "Left aligned"
					},
					"value": "left"
				},
				{
					"label": {
						"zh_CN": "居中",
						"en_US": "In the center"
					},
					"value": "center"
				},
				{
					"label": {
						"zh_CN": "右对齐",
						"en_US": "Right align"
					},
					"value": "right"
				}
			],
			"default": "left"
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "宽度铺满",
				"en_US": "Spread the width"
			},
			"id": "is_wdith_fill",
			"default": "0"
		},
		{
			"type": "card_header",
			"label": {
				"zh_CN": "内容",
				"en_US": "Content"
			}
		},
		{
			"type": "card_input",
			"label": {
				"zh_CN": "标题",
				"en_US": "Title"
			},
			"id": "title",
			"default": "Heading"
		},
		{
			"type": "card_text_editor",
			"label": {
				"zh_CN": "内容",
				"en_US": "Content"
			},
			"id": "content",
			"default": "Use this text to share information about your brand with your customers. Describe a product,share announcements,or welcome customers to your store."
		},
		{
			"type": "card_color",
			"label": {
				"zh_CN": "标题颜色",
				"en_US": "Header color"
			},
			"id": "title_color",
			"default": "#1D1F21"
		},
		{
			"type": "card_color",
			"label": {
				"zh_CN": "内容颜色",
				"en_US": "Content color"
			},
			"id": "content_color",
			"default": "#987273"
		},
		{
			"type": "card_color",
			"label": {
				"zh_CN": "内容背景",
				"en_US": "Content background"
			},
			"id": "bg_color",
			"default": "#fff"
		},
		{
			"type": "card_header",
			"label": {
				"zh_CN": "按钮",
				"en_US": "Button"
			}
		},
		{
			"type": "card_input",
			"label": {
				"zh_CN": "按钮标题",
				"en_US": "Button title"
			},
			"id": "button_title",
			"default": "more"
		},
		{
			"type": "card_page_link",
			"label": {
				"zh_CN": "按钮链接",
				"en_US": "Button link"
			},
			"default": {
				"type": "",
				"title": "",
				"url": ""
			},
			"id": "button_link"
		}
	],
	"blocks": [],
	"default": {
		"settings": {
			"image": {
				"src": "",
				"alt": ""
			},
			"image_position": "left",
			"text_position": "left",
			"title": "About Us",
			"content": "Share information about your brand with your customers. Describe a product, make announcements, or welcome customers to your store.",
			"title_color": "#1D1F21",
			"content_color": "#666",
			"bg_color": "",
			"is_wdith_fill": false,
			"button_title": "LEARN MORE",
			"button_link": {
				"type": "",
				"title": "",
				"url": ""
			}
		},
		"blocks": []
	},
	"icon": "icon-tuwen"
}
{% endschema %}